<template>
  <el-form ref="form" :rules='rules' :model="subForm" label-width="80px">
    <el-form-item>
      <div>
        <span >仓库名:</span>
        <el-select v-model="subForm.warehouseName" clearable  @blur.native.capture="getGoodsType"  placeholder="请选择">
          <el-option
            v-for="item in subForm.select1"
            :key="item.warehouseId"
            :label="item.warehouseName"
            :value="item.warehouseId">
          </el-option>
        </el-select>
        <span>商品分类:</span>
        <el-select v-model="subForm.goodsType" clearable   placeholder="请选择">
          <el-option
            v-for="item in subForm.select2"
            :key="item.goodsType"
            :label="item.goodsType"
            :value="item.goodsType">
          </el-option>
        </el-select>
        <el-button  style="margin-left: 7%" type="primary" @click="verification">查询</el-button>
      </div>
    </el-form-item>
    <el-form-item>
      <span style="color: #cf9236">库存的存量(单位:件)</span>
    </el-form-item>
    <el-form-item>
      <div id="report"  style="width: 810px;height: 360px;">
<!--        <el-sl-panel v-model="source"></el-sl-panel>-->
      </div>
    </el-form-item>
  </el-form>

</template>

<script>
  import echarts from "echarts";
  export default {
    name: 'Check',
    data() {
      return {
        subForm: {
          goodsType: '',
          warehouseName:'',
          select1:[],
          select2:[],
        },
        source: [],
        charts: "",

        rules: {
          goodsType: [
            {
              // required: true,
              // message: '商品的类型必须选',
              // trigger: ['blur', 'change']
            }
          ],
          warehouseName: [
            // {required: true,
            //   message: '商品的名称',
            //   trigger: ['blur', 'change']}
          ]
        }
      }

    },

    methods: {
      //查询监听
      verification(){
        // if (this.subForm.warehouseName == null || this.subForm.warehouseName === '') {
        //   this.$message.error(new Error('仓库必须选'))
        //   return false
        // }
        // if (this.subForm.goodsType == null || this.subForm.goodsType === '') {
        //   this.$message.error(new Error('商品分类必须选'))
        //   return false
        // }
        this.$axios.post('GoodsInf', {
          warehouseId:this.subForm.warehouseName,
          goodsType:this.subForm.goodsType
        }).then(resp => {
          if (resp) {
            this.source = resp.data.goodsInf
            console.log(this.source)
            this.draw("report")
          }
        })
        // getAllGoods(this)
      },
      //获得商品的种类
      getGoodsType () {
        // alert(this.subForm.supplierName)
        this.$axios.post('outGtGoodsType', {
          warehouseId:this.subForm.warehouseName
        }).then(resp => {
          if (resp) {
            this.subForm.select2 = resp.data.goodsTypeList
          }
        })
      },
      // //获取商品名称和数量
      // getGoodsInf(){
      //   this.$axios.post('GoodsInf', {
      //     warehouseId:this.subForm.warehouseName,
      //     goodsType:this.subForm.goodsType
      //   }).then(resp => {
      //     if (resp) {
      //       this.source = resp.data.goodsInf
      //     }
      //   })
      // },

      draw(id) {
        this.charts = echarts.init(document.getElementById(id));
        this.charts.setOption({
          legend: {},
          tooltip: {},
          dataset: {
            source: this.source    //连接数据
          },
          xAxis: { type: "category" },
          yAxis: {
            // data:
          },
          grid: { bottom: 30 },
          series: [
            {
              type: "bar",    //表示这个是柱状图
              barCategoryGap: "40%",
              itemStyle: { color: "#F56C6C" },   //定义颜色
              label: {
                show: true,
                position: 'top'
              },
            },
          ]
        });
      }
    },
    mounted() {
      getWarehouseName(this)
      getAllGoods(this)
      this.$nextTick(function() {
        this.draw("report");
      })
      // getWarehouseName(this)
      // getAllGoods(this)
    }

  }
  function getWarehouseName($this) {
    $this.$axios.post("OutGetWarehouseName", {
    }).then(resp => {
      if (resp) {
        $this.subForm.select1 = resp.data.warehouseNameList
      }
    })
  }
  function getAllGoods($this){
    $this.$axios.post('getAllGoods', {
      warehouseId:$this.subForm.warehouseName,
      goodsType:$this.subForm.goodsType
    }).then(resp => {
      if (resp) {
        $this.source = resp.data.goodsInf
        console.log($this.source)
        $this.draw("report")
      }
    })
  }

</script>

<style scoped>

</style>
